<template>
	<view class="main">
		<u-navbar :border-bottom="false" :is-fixed="true" :background="background" back-icon-color="#FFF"
			class="nav-bar"></u-navbar>
		<view class="bg">
			<image :src="STATIC_URL + 'dlbj.png'" mode="aspectFill"></image>
			<view class="head-info">
				<text class="title">排行榜</text>
				<text class="hint">每月完成任务前50名参与排名</text>
			</view>
		</view>
		<view class="container">
			<view class="box-top">
				<view class="info flex-aro">
					<view class="item">
						<text class="num">{{owner.ranking}}</text>
						<text class="label">我的排名</text>
					</view>
					<view class="item">
						<text class="num">{{owner.total_money}}</text>
						<text class="label">当前业绩</text>
					</view>
					<!-- 					<view class="item">
						<text class="num">{{owner.subordinate_money}}</text>
						<text class="label">本月任务</text>
					</view> -->
				</view>
				<view class="line"></view>
				<view class="filter flex-btw">
					<text class="time">更新于 {{time}}</text>
					<view class="area" @click="openSelect">
						<text>{{area || '全国'}}</text>
						<u-icon name="arrow-down"></u-icon>
					</view>
				</view>
			</view>
			<view class="rank-list">
				<view class="table-header">
					<text>排名</text>
					<text>用户名</text>
					<text>会员等级</text>
					<text>当前业绩</text>
				</view>
				<view class="item" v-for="(item, index) in list" :key="index">
					<view class="data-box">
						<image class="rank-pic" :src="`${STATIC_URL2}rank-${index+1}.png`" mode="aspectFit"
							v-if="index < 3"></image>
						<text class="rank" v-else>{{index + 1}}</text>
					</view>
					<view class="data-box">
						<view class="name">{{item.name}}</view>
					</view>
					<view class="data-box flex-center">
						<view class="level">{{item.vip_level_text}}</view>
					</view>
					<view class="data-box">
						<text class="num">{{item.total_money}}</text>
					</view>
				</view>
			</view>
		</view>
		<simple-address ref="simpleAddress" @onConfirm="setArea" themeColor='#007AFF'></simple-address>
	</view>
</template>

<script>
	let timer = null
	import {
		rankInfotApi
	} from '@/utils/api.js'
	import {
		formatTime
	} from '@/utils/time.js'
	import simpleAddress from '@/components/simple-address/simple-address.vue'
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'rgba(203,113,43, 0)'
				},
				area: "",
				list: [],
				// 个人信息
				owner: {},
				time: '',
				top: 0
			}
		},
		components: {
			simpleAddress
		},
		onLoad() {
			this.getData()
			this.getCurrentTime()
			this.getOffsetTop()
		},
		methods: {
			async getData() {
				let {
					data
				} = await rankInfotApi({
					city: this.area
				})
				this.owner = data.my_ranking
				this.list = data.data
			},
			getCurrentTime() {
				let date = new Date().getTime() / 1000
				let time = formatTime(date, 'Y-M-D')
				this.time = time
			},
			getOffsetTop() {
				uni.getSystemInfo({
					success: (res) => {
						// this.top = res.statusBarHeight + uni.upx2px(50)
					}
				})
			},
			openSelect() {
				this.$refs.simpleAddress.open()
			},
			setArea(data) {
				let arr = data.label.split("-")
				let city = arr[1] === '市辖区' ? arr[0] : arr[1]
				this.area = city
				this.getData()
			}
		},
		onPageScroll({
			scrollTop
		}) {
			clearTimeout(timer)
			timer = setTimeout(() => {
				if (scrollTop > 100) {
					this.background.backgroundColor = "rgba(203,113,43, 1)"
				} else {
					this.background.backgroundColor = `rgba(203,113,43, ${scrollTop / 100})`
				}
			}, 10)
		}
	}
</script>

<style scoped lang="scss">
	.rank-pic {
		width: 48rpx;
		height: 63rpx;
	}

	.box-shadow {
		box-shadow: 0 10rpx 30rpx #d6d6d6;
	}

	.main {
		width: 100%;
		min-height: 100vh;
		background-color: #EEEFF0;

		.bg {
			width: 100%;
			height: 406rpx;
			position: absolute;
			top: 0;

			image {
				width: 100%;
				height: 100%;
			}

			.head-info {
				position: absolute;
				top: 35%;
				left: 97rpx;
				z-index: 10;
				flex-direction: column;
				display: flex;
				color: #FFF;

				.title {
					font-size: 60rpx;
					margin-bottom: 31rpx;
				}

				.hint {
					font-size: 28rpx;
				}
			}
		}

		.container {
			padding: 0 18rpx;
			position: relative;
			margin-top: 150rpx;
		}

		.nav-bar {
			transition: all linear .2s;
		}

		.box-top {
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;
			padding: 40rpx 0;
			margin-bottom: 14rpx;

			.info {
				.item {
					flex: 1;
					@extend .flex-center;
					flex-direction: column;

					.num {
						font-size: 48rpx;
						font-weight: bold;
						color: #CB712B;
					}

					.label {
						font-size: 28rpx;
						color: #999999;
					}
				}
			}

			.line {
				background-color: #EEEFF0;
				width: 100%;
				height: 2rpx;
				margin: 38rpx 0;
			}

			.filter {
				padding: 0 48rpx;
				color: #999999;

				.time {
					font-size: 28rpx;
				}

				.area {
					@extend .flex-btw
				}
			}
		}

		.rank-list {
			background-color: #fff;

			.table-header {
				padding: 30rpx 48rpx;
				@extend .flex-btw;

				text {
					flex: 1;
				}

				text:nth-child(4) {
					text-align: center
				}
			}

			.item {
				@extend .flex-btw;
				padding: 40rpx 48rpx;
				border-top: 1px solid #EEE;

				.data-box {
					flex: 1;
					padding: 0 10rpx;
					box-sizing: border-box;
				}

				.rank {
					color: #EEEFF0;
					font-size: 60rpx;
				}

				.level {
					font-size: 21rpx;
					padding: 2rpx 10rpx;
					border: 1px solid #CB712B;
					@extend .flex-center;
					color: #CB712B;
					border-radius: 100rpx;
					white-space: nowrap;
					display: inline-block;
				}

				.num {
					font-size: 32rpx;
					color: #CB712B;
					font-weight: bold;
				}
			}
		}
	}
</style>
